<script lang="ts" setup>
	import md5 from 'md5';
	import { ref, reactive, computed, getCurrentInstance, onMounted, ComponentInternalInstance } from 'vue';
	import type { ElForm } from 'element-plus';
	import { useRouter, useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { isPassRegular } from '@/utils/regularCommon';
	import { prowerType } from '@/types/response';
	// import {  commonImgPicture } from '@/ajax';

	const { appContext } = getCurrentInstance() as ComponentInternalInstance;
	const proxy = appContext.config.globalProperties;
	type FormInstance = InstanceType<typeof ElForm>;
	// 路由
	const router = useRouter();
  let route = useRoute()

	console.log('1111111111',route.path);
	// vuex
	const store = useStore();
	const menuCollapse = computed(() => store.state.menuCollapse);
	const sysId = computed(() => store.state.user.sysId);
	const powerAliasTree = computed(() => store.state.user.powerAliasTree);
	const userInfo = computed(() => store.state.user.userInfo);
	// 系统切换
	const getSysName = (id: string) => {
		const parsentSys = powerAliasTree.value.filter((r: prowerType) => r.id === id);
		return parsentSys.length ? parsentSys[0].name : ``;
	};
	const handleCommand = (command: string) => {
		store.commit(`user/SET_SYS_PATH`, command);
		proxy.setSession(`sysId`, command);
		if (powerAliasTree.value[0].path === `/menu`) {
			proxy.setSession(`menuDefaultActive`, `/menuManage`);
			router.push(`/menuManage`);
		} else {
			proxy.setSession(`menuDefaultActive`, `/home`);
			router.push(`/home`);
		}
	};
	// 头像/名字显示
	const userAvatar = ref(``);
	const loginName = computed(() => (userInfo.value && userInfo.value.loginName ? userInfo.value.loginName : ``));
	onMounted(async () => {
		// if (userInfo.value && userInfo.value.profile) {
		// 	const res = await commonImgPicture(userInfo.value.profile);
		// 	if (res.success) {
		// 		userAvatar.value = res.content;
		// 	}
		// }
	});
	// 修改密码
	const dialogVisible = ref(false);
	const notEquel = (rule: any, value: any, callback: any) => {
		if (value === formPass.password) {
			callback(new Error(`新密码不能和旧密码相等`));
		} else {
			callback();
		}
	};
	const confirmPasswordFilter = (rule: any, value: any, callback: any) => {
		if (formPass.newpassword && value !== formPass.newpassword) {
			callback(new Error(`两次输入的密码不一致！`));
		} else {
			callback();
		}
	};
	const formPassRef = ref();
	let formPass:any = reactive({
		'password': ``,
		'newpassword': ``,
		'confirmpassword': ``
	});
	const formPassRules = reactive({
		'password': [
			{
				'required': true,
				'message': `请输入旧密码！`,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassRegular,
				'trigger': `blur`
			}
		],
		'newpassword': [
			{
				'required': true,
				'message': `请输入密码`,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': notEquel,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassRegular,
				'trigger': `blur`
			}
		],
		'confirmpassword': [
			{
				'required': true,
				'message': `请再次输入密码`,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': isPassRegular,
				'trigger': `blur`
			},
			{
				'required': true,
				'validator': confirmPasswordFilter,
				'trigger': `blur`
			}
		]
	});
	const changePassword = () => {
		formPass = {
			'password': ``,
			'newpassword': ``,
			'confirmpassword': ``
		};
		dialogVisible.value = true;
	};
	const canaleFn = () => {
		ElMessageBox.confirm(`确认关闭？`)
			.then(() => {
				dialogVisible.value = false;
				formPass = {
					'password': ``,
					'newpassword': ``,
					'confirmpassword': ``
				};
			})
			.catch(() => {});
	};
	const submitFn = (formEl: FormInstance | undefined) => {
		if (!formEl) return;
		formEl.validate(async valid => {
			if (valid) {
				const sentData = {
					'loginName': loginName.value,
					'oldPassword': md5(formPass.password),
					'password': md5(formPass.newpassword)
				};
				// await usersPasswordchange(sentData).then(res => {
				// 	if (res.success) {
				// 		ElMessage.success(`密码修改成功！`);
				// 	}
				// });
				dialogVisible.value = false;
			}
		});
	};
	// 退出登录
	const loginOut = () => {
		ElMessageBox.confirm(`确定退出？`, `提示？`, {
			'confirmButtonText': `确定`,
			'cancelButtonText': `取消`,
			'closeOnClickModal': false
		})
			.then(async () => {
				proxy.removeSession();
				store.dispatch(`user/logout`);
				// router.push(`/login`);
				const redirectUri = import.meta.env.VITE_BASE_SSO_URL + `/sso/oauth/logout?redirect_uri=` + window.location.origin;
				console.log(redirectUri);
				window.location.href = redirectUri;
			})
			.catch();
	};
</script>
<template>
	<div class="wrapHead">
		<div class="headerCont">
			<div class="logo" :class="{'collapse': menuCollapse}">
				<img src="../../assets/images/worktable/logo.png" class="logoImg" />
				<h1 v-show="!menuCollapse">周口市碳电一体化管理平台</h1>
			</div>

			<div style="min-width: 600px">
				<el-menu class="el-menu-demo" mode="horizontal" style="background:#FFF !important;" :default-active="route.path">
					<el-sub-menu>
						<template #title>基础信息</template>
						<el-menu-item index="/carbon/product">
							<router-link :to="{path:'/carbon/product'}">能碳产品管理</router-link>
						</el-menu-item>
						<el-menu-item index="/carbon/monitoring/index">
							<router-link :to="{path:'/carbon/monitoring/index'}">监控点配置</router-link>
						</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</div>


			<div class="headerRight">
				<img src="@/assets/images/worktable/GroupMsg.png" class="bell" />
				<el-dropdown class="userOpt">
					<span class="el-dropdown-link optSelectTop">
						<img v-if="userAvatar" class="userImg" :src="userAvatar" alt="头像" />
						<img v-else class="userImg" src="../../assets/images/userDefault.png" alt="头像" />
						<span>你好，{{ loginName }}</span>
						<el-icon size="24"><ArrowDown :size="24" /></el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="changePassword">
								<i class="iconfont icon-xiugaimima" />
								修改密码
							</el-dropdown-item>
							<el-dropdown-item @click="loginOut">
								<i class="iconfont icon-fanhui1" />
								退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<div class="myDialog">
			<el-dialog v-model="dialogVisible" title="修改密码" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false" width="40%" @close="dialogVisible = false">
				<el-form ref="formPass" class="mt20" :rules="formPassRules" :model="formPass" label-width="120px">
					<el-form-item label="登录名">
						<el-input v-model="loginName" :readonly="true" />
					</el-form-item>
					<el-form-item label="旧密码" prop="password">
						<el-input v-model="formPass.password" type="password" auto-complete="new-password" autocomplete="off" placeholder="请输入旧密码 " />
					</el-form-item>
					<el-form-item label="新密码" prop="newpassword">
						<el-input v-model="formPass.newpassword" type="password" autocomplete="off" placeholder="请输入新密码 " />
					</el-form-item>
					<el-form-item label="确认新密码" prop="confirmpassword">
						<el-input v-model="formPass.confirmpassword" type="password" autocomplete="off" placeholder="请确认新密码" />
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button class="cancel" @click="canaleFn"> 取 消 </el-button>
						<el-button type="primary" class="save" @click="submitFn(formPassRef)"> 确 定 </el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.wrapHead {
		// padding: 0 20px;
		// background: $nav_B;
		background: #FFF;
		color: $nav_c;
		> .headerCont {
			@include wh(100%, 100%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82px;
			border-bottom: 1px solid #ECEFF8;

			> .logo {
				// width: 216px;
				// min-width: 216px;
				// height: 48px;
				display: flex;
				justify-content: center;
				align-items: center;
				// background-color: $logo_B;
				&.collapse {
					width: 65px;
					min-width: 65px;
				}
				.logoImg {
					margin-left: 30px;
					width: 24px;
					height: 20px;
					// vertical-align: middle;
					// padding: 0 10px;
				}
				h1 {
					margin-left: 10px;
					font-weight: bold;
					color: #0080FF;
					font-size: 22px;
					font-family: PingFangSC-Semibold, PingFang SC;
				}
				// .logoFont {
				// 	width: 140px;
				// }
				// img {
				// 	vertical-align: middle;
				// }
			}
			.sysConfig {
				display: flex;
				align-items: center;
				flex: 1;
				> span {
					display: inline-block;
					font-size: 20px;
					font-weight: 600;
					cursor: pointer;
					color: #455570;
					vertical-align: middle;
				}
				.selectSys {
					cursor: pointer;
					position: relative;
					:deep(.el-dropdown) {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40px;
						.el-dropdown-link {
							height: 100%;
							display: flex;
							align-items: center;
							.iconfont {
								width: 30px;
								font-size: 24px;
								color: #00c9e7;
								vertical-align: middle;
								margin: 0 10px 0 5px;
							}
							.el-dropdown-link {
								color: $white;
							}
						}
						.sysName {
							display: inline-block;
							font-size: 20px;
							font-weight: 600;
							max-width: 130px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #00c9e7;
							vertical-align: middle;
						}
					}
				}
				.sys {
					display: inline-block;
					text-align: center;
					width: 60px;
					height: 24px;
					line-height: 24px;
					background-color: #3f4e68;
					border-radius: 2px;
					font-size: 16px;
					color: #1c2632;
				}
				.el-dropdown-link {
					color: $white;
					
				}
			}
			.headerRight {
				width: 350px;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 64px;
				.bell {
					width: 24px;
					// height: 24px;
					margin-right: 30px;
				}
				.userOpt {
					cursor: pointer;
					position: relative;
					font-size: 18px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #242F57;
					.userImg {
						width: 46px;
						// height: 24px;
						margin-right: 15px;
						border-radius: 50%;
						vertical-align: middle;
					}
					:deep(.el-dropdown) {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40px;
						.el-dropdown-link {
							height: 100%;
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
		.mt20 {
			margin-top: 20px;
		}
	}
</style>
<style lang="scss">
	.selectSysDropdown {
		width: 160px;
		background-color: #2e3c53 !important;
		box-shadow: 0px 3px 22px 0px rgba(32, 43, 61, 0.15) !important;
		border-radius: 6px 6px 6px 4px !important;
		display: flex;
		flex-wrap: wrap;
		> .popper__arrow {
			display: none !important;
		}
		> .el-dropdown-menu__item {
			width: 50%;
			height: 60px !important;
			display: flex;
			flex-direction: column;
			span {
				display: inline-block;
				width: 100%;
				text-align: center;
				height: 30px;
				line-height: 30px;
				color: #6e81a0;
				&:first-child {
					font-size: 18px;
				}
			}
			&:hover {
				background: transparent !important;
				span {
					&:first-child {
						color: #00c8e7dc;
					}
					&:last-child {
						color: #ffffffdc;
					}
				}
			}
		}
		.activeD {
			span {
				&:first-child {
					color: #00c9e7;
				}
				&:last-child {
					color: #ffffff;
				}
			}
		}
	}
	.optSelectTop{
		display: flex;
		align-items: center;
	}
</style>
